<template>
    <div style="margin-bottom: 60px">
        <div class="category">
            <div class="category-btn" @tap="goCatagoryList()">
                <img src="/public/images/classify-all.png">
                <span>全部</span>
            </div>
            <div class="category-btn" v-for="item in data.catagories" @tap="goCatagoryList(item.id)">
                <img :src="item.imageUrl">
                <span>{{item.name}}</span>
            </div>
        </div>
    </div>
</template>


<script>
  require('../../public/images/classify-all.png');
  require('../../public/images/classify-nvzhuang.png');
  require('../../public/images/classify-jiajv.png');
  require('../../public/images/classify-nanzhuang.png');
  require('../../public/images/classify-shuma.png');
  require('../../public/images/classify-xiezi.png');
  require('../../public/images/classify-huwai.png');
  require('../../public/images/classify-muying.png');
  require('../../public/images/classify-baobao.png');
  import store from '../mall-store';
  export default {
    data: function () {
      return {
        data: store.state,
        keyword: ''
      };
    },
    methods: {
      goback: function () {
        history.go(-1);
      },
      goCatagoryList: function (id) {
        this.$router.go({name: 'goodsList', query: {catagoryId: id}});
      },
      search: function () {
        store.getCatagories(this.keyword);
      }
    },
    created: function () {
      store.getCatagories();
    }
  };
</script>

